<template>
  <div>
    <!-- 
      1. 绑定在组件标签上的都是自定义事件，也就是需要组件内部去通过 $emit 去触发的
      2. 原生事件与自定义事件的 $event 的不同
        1. 原生事件的   $event 是事件对象，$event.target DOM对象
        2. 自定义事件的 $event , 是触发这个事件时，传递的是啥就是啥
     -->
    <HelloWrold msg="你好" :name="username" @my-click="username = $event" />
    <HelloWrold msg="你好" v-model="username" />

    <HelloWrold2 msg="你好" :value="username" @input="onClick" />
    <HelloWrold2 msg="你好" :value="username" @input="username = $event" />
    <!-- 组件上使用 v-model -->
    <HelloWrold2 msg="你好" v-model="username" />

    <BaseInput label="用户名" />

    <BaseInput label="密码" />
  </div>
</template>

<script>
import BaseInput from "./components/BaseInput.vue";
import HelloWrold from "./components/HelloWorld.vue";
import HelloWrold2 from "./components/HelloWorld2.vue";

export default {
  name: "App",

  components: {
    BaseInput,
    HelloWrold,
    HelloWrold2,
  },

  data() {
    return {
      username: "张三",
    };
  },

  methods: {
    onClick(xxx) {
      alert("父组件，收到了", xxx);
      this.username = xxx;
    },
  },
};
</script>

<style></style>
